<template>
    <div class="users">
    <div class="manage">
      <el-dialog :title="operateType === 'add' ? '新增用户':'更新用户'"
        :visible.sync ="isShow">
        <el-form label-width="100px">
          <el-form-item label="账号" prop="name">
            <el-input v-model="name" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" >
            <el-input v-model="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex" >
            <el-radio v-model="sex" label="男">男</el-radio>
            <el-radio v-model="sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="  " prop="btn">
          <el-button @click="isShow = false" icon="el-icon-close">取消</el-button>
          <el-button type="success" @click="adds" icon="el-icon-check">确定</el-button>
        </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="header">
      <el-input  @change="get"  v-model="input"  placeholder="请输入内容"
      ></el-input>
      <el-button type="info" icon="el-icon-search">查询</el-button>
    </div>
    <div class="wrapper">
      <el-table :data="tableData.slice((cur-1)*pageSize, cur*pageSize)" style="width: 100%" :default-sort="{prop:'date',order:'descending'}">
        <el-table-column prop="name" label="账号" sortable min-width="22%">
        </el-table-column>
        <el-table-column prop="sex" label="性别" sortable min-width="22%">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" sortable min-width="22%">
        </el-table-column>
        <el-table-column label="操作" min-width="34%">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" >编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;margin:20px">
      <el-pagination background layout="prev, pager, next" @current-change="current_change"
        :total="tableData.length" :page-size="pageSize">
      </el-pagination>
  </div>
  </div>
</template>

<script>
import axios from 'axios'


export default {
    inject:['reload'],
    name:'Users',
    components:{
        
    },
    data(){
        return{
          operateType:'add',
          isShow: false,
          input:'',  
          name:'',
          password:'',
          id:'',
          sex:'男',
          email:'',
          tableData: [],
          cur:1,//当前页
          total:0,//总页数
          pageSize:8,//每页展示的内容
        }
    },
    created(){
        axios.get('http://localhost:9999/users').then(res=>{
          this.tableData = res.data
        }).catch(err=>{
          console.log("获取数据失败"+err)
        })
    },
    
    methods:{

      current_change(newPage){
        this.cur = newPage
      },
      handleEdit(row) {
        this.operateType= 'edit'
        this.isShow = true
        this.id = row.id
        this.name = row.name
        this.password = row.password
        this.sex = row.sex
        this.email = row.email
      },
      get(val){ //查询操作
        axios.get('http://localhost:9999/ulist/get',{
          params:{
            name: val,
          }
        }).then(res=>{          
          this.tableData = res.data
        }).catch(err=>{
          console.log(获取数据失败);
        })
      },
      adds(){
          axios.get('http://localhost:9999/ulist/update',{
            params:{
              name: this.name,
              password: this.password,
              sex: this.sex,
              email: this.email,
              id:this.id
            }
          }).then(res=>{
            this.isShow = false
            this.reload()
          }).catch(err=>{
            console.log("数据获取失败"+err);
          })
      },
      del(row) {//删除商品
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {         
          axios.get('http://localhost:9999/ulist/del',{
            params:{
              name:row.name
            }
            }).then(res=>{
              this.reload()
              this.$message({
                type: 'success',
                message: '删除成功!',
              })              
            })
        }).catch(err => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
}
</script>
<style lang="less" scoped>
.users {
  margin: 20px;
  height: 592px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }

}
.wrapper {
    margin: 20px;
}
</style>
